<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-07-24 17:02:04
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-08-20 17:13:26
 * @FilePath: \passiflora-edulis-sims\src\components\CreateBook\SuspendBtnComponent.vue
 * @Description: 悬浮按钮的组件
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
-->
ss
<script setup lang="ts">
import type { IFrame } from 'leafer-ui'
import { v1_wordsearch } from 'src/boot/PuzzleApi'
import type {
  IAiCrossWordRes,
  IAiDoublePuzzleRes,
  IAiWordSearchRes,
} from 'src/interfaces/Responses/AIRes'

import { useCanvasStore } from 'src/stores/canvas-store'
import { useGeneralPuzzleStore } from 'src/stores/CreateBook/general-puzzle-store'
import { usePuzzleReqStore } from 'src/stores/CreateBook/puzzle-req-store'
import { useCrosswordStore } from 'src/stores/crossword-store'
import { useGlobalGridStore } from 'src/stores/global-grid-store'
import { useGlobalTextStore } from 'src/stores/global-text-store'
import { useLearferAppStore } from 'src/stores/leafer-app-store'
import { useWordSearchIStore } from 'src/stores/wordsearch-store'
import { CrosswordUtil } from 'src/utils/CrosswordUtil'
import { DoublePuzzle } from 'src/utils/generate_double_puzzle'
import { WordSearchPuzzleUtil } from 'src/utils/WordSearchPuzzleUtil'
import { ref } from 'vue'
const leafer_app_store = useLearferAppStore()

/**
 * 切换展示方式
 */
const switch_show_type = () => {
  leafer_app_store.clear()
  leafer_app_store.show_type =
    leafer_app_store.show_type === 'contrast' ? 'vertical' : 'contrast'
  leafer_app_store.draw()
}
// 控制按钮是否可以点击
const generate_disable = ref(false)

/**
 * 渲染拼图
 */
const general_puzzle_store = useGeneralPuzzleStore()
const canvas_store = useCanvasStore()
const puzzle_req_store = usePuzzleReqStore()
const global_grid_store = useGlobalGridStore()
const global_text_store = useGlobalTextStore()

const crossword_store = useCrosswordStore()
// 初始化 wordsearch 的 store
const word_search_store = useWordSearchIStore()

const draw_puzzle = async () => {
  generate_disable.value = true
  try {
    const topic_frames: IFrame[] = []
    const ans_frames: IFrame[] = []

    // 为global_grid_store.text赋值
    global_grid_store.text = global_text_store.$state

    leafer_app_store.clear()
    for (const puzzle of puzzle_req_store.data) {
      // 创建Double的数组对象
      switch (puzzle_req_store.puzzle_mould) {
        case 'DoublePuzzle': {
          const r_frame = create_double_puzzle(puzzle as IAiDoublePuzzleRes)
          topic_frames.push(r_frame[0])
          ans_frames.push(r_frame[1])
          break
        }
        case 'WordSearch': {
          const r_frame = await create_word_search(puzzle as IAiWordSearchRes)
          topic_frames.push(r_frame[0])
          ans_frames.push(r_frame[1])
          break
        }
        case 'CrossWord': {
          const r_frame = await create_crossword(puzzle as IAiCrossWordRes)
          topic_frames.push(r_frame[0])
          ans_frames.push(r_frame[1])
          break
        }
        default: {
          break
        }
      }
    }

    leafer_app_store.add('topic', topic_frames)
    leafer_app_store.add('ans', ans_frames)
    leafer_app_store.draw()
    console.log('渲染成功')
  } catch (error) {
    console.log(error)
  } finally {
    generate_disable.value = false
  }
}

const create_double_puzzle = (puzzle: IAiDoublePuzzleRes): [IFrame, IFrame] => {
  // 设置标题
  general_puzzle_store.set_title(puzzle.title)
  general_puzzle_store.set_instruction(puzzle.instructions)
  const doubule_puzzle = new DoublePuzzle(
    canvas_store.canvas,
    general_puzzle_store.title,
    general_puzzle_store.instruction,
    puzzle.words,
    global_grid_store.grid_style,

    puzzle.messages,
    puzzle.reveal_letters,
    general_puzzle_store.max_wordlen,

    global_grid_store.grid_style,
    global_grid_store.grid_style,
    'outside'
  )
  doubule_puzzle.generate_puzzle()
  const anw_frame = doubule_puzzle.get_answer_frame()
  const topic_frame = doubule_puzzle.get_topic_frame()
  // 将 frame 添加进 列表中
  return [topic_frame, anw_frame]
}

const create_word_search = async (
  puzzle: IAiWordSearchRes
): Promise<[IFrame, IFrame]> => {
  general_puzzle_store.set_title(puzzle.title)
  general_puzzle_store.set_instruction(puzzle.instructions)
  // 将 words 进行 拼图设计
  // // 获取 wordsearch 的 puzzle 的设置
  const wordsearch_store = useWordSearchIStore()
  // 创建一个临时的列表变量
  const wordsearch_req = wordsearch_store.v1_wordsearch_reqData
  // 设置 wordsearch_req 的words 的内容
  wordsearch_req.words = puzzle.words.join(',')
  const res = await v1_wordsearch(wordsearch_req)
  const word_search_puzzle = new WordSearchPuzzleUtil(
    canvas_store.canvas,
    general_puzzle_store.title,
    general_puzzle_store.instruction,
    global_grid_store.grid_style,

    res.data.answers,
    res.data.puzzle_array,
    word_search_store.solution,
    word_search_store.words_legend
  )
  word_search_puzzle.generate_puzzle()
  const anw_frame = word_search_puzzle.get_answer_frame()
  const topic_frame = word_search_puzzle.get_topic_frame()
  // 将 frame 添加进 列表中
  return [topic_frame, anw_frame]
}

const create_crossword = async (
  puzzle: IAiCrossWordRes
): Promise<[IFrame, IFrame]> => {
  general_puzzle_store.set_title(puzzle.title)
  general_puzzle_store.set_instruction(puzzle.instructions)
  global_grid_store.text = global_text_store.$state
  crossword_store.words = puzzle.words
  const res = await crossword_store.v1_crossword()
  const word_search_puzzle = new CrosswordUtil(
    canvas_store.canvas,
    general_puzzle_store.title,
    general_puzzle_store.instruction,
    global_grid_store.grid_style,
    crossword_store.words,
    res.answers,
    crossword_store.legend_type
  )
  word_search_puzzle.generate_puzzle()
  // 将 frame 添加进 列表中
  const anw_frame = word_search_puzzle.get_answer_frame()
  const topic_frame = word_search_puzzle.get_topic_frame()
  // 将 frame 添加进 列表中
  return [topic_frame, anw_frame]
}
</script>
<template>
  <div>
    <q-card class="floating-card">
      <q-card-section>
        <q-btn
          class="q-ml-sm"
          color="primary"
          label="生成拼图"
          :disable="generate_disable"
          @click="draw_puzzle"
        ></q-btn>
        <q-btn
          class="q-ml-sm q-mr-sm"
          color="primary"
          label="切换展示方式"
          @click="switch_show_type()"
        >
        </q-btn>
        <q-btn
          class="q-ml-sm q-mr-sm"
          color="primary"
          label="导出"
          @click="leafer_app_store.export_frame()"
        >
        </q-btn>
      </q-card-section>
    </q-card>
  </div>
</template>

<style lang="sass" scoped>
.floating-card
  position: fixed;
  bottom: 1%; /* 距离底部的距离 */
  left: 50%; /* 将按钮的左边缘定位到屏幕中间 */
  transform: translateX(-50%); /* 向左移动按钮宽度的一半，实现真正居中 */
  z-index: 999; /* 确保按钮在其他元素之上 */
</style>
